<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<style type="text/css">
   div{
   	height:400px;
   }
   .left{
   	width:200px;
   	background-color:red;
   	float:left;
   }
   .right{
   	width:300px;
   	background-color:blue;
   	float:right;
   }
   .center{
   	background-color:green;
   }
   .type1{
   	background-color:red;
   }
   .type1 tr td{
   	background-color:#fff;
   }
   .type2 tr td{
    border:1px solid red;
   } 
   .type2 tr td,.type2{
    border-collapse:collapse;
   }
   .type2 tr:nth-child(odd){background-color:#ccc;}

  .sjx,.innersjx{
  	width:0;
  	height:0;
  	border-width:20px;
  	border-style:solid;
  	border-color:red transparent transparent transparent;
  	position:relative;

  }
  .innersjx{
  	border-color:#fff;
  	border-color:#fff transparent transparent transparent;
  	position:absolute;
  	top: -21px;
    left: -20px;
  }
  .dialog{
  	width:400px;
  	height:200px;
  	background:red;
  	position:fixed;
  	top:50%;
  	left:50%;
  	margin-top:-110px;
  	margin-left:-200px;
  }

  .dialog label{
  	display:block;
  }
  .makser{
  	width:100%;
  	height:100%;
  	position:fixed;
  	top:0;
  	background-color:black;
  	opacity:0.2;

  }

</style>
<body>
  <div class="left"></div>
  <div class="right"></div>
  <div class="center">abcdfg</div>
  <hr>
  <table class="type1" cellspacing="1">
  	<tr>
  		<td>item</td>
  		<td>item</td>
  		<td>item</td>
  		<td>item</td>
  		<td>item</td>
  	</tr>
  	<tr>
  		<td>item</td>
  		<td>item</td>
  		<td>item</td>
  		<td>item</td>
  		<td>item</td>
  	</tr>
  	<tr>
  		<td>item</td>
  		<td>item</td>
  		<td>item</td>
  		<td>item</td>
  		<td>item</td>
  	</tr>
  	<tr>
  		<td>item</td>
  		<td>item</td>
  		<td>item</td>
  		<td>item</td>
  		<td>item</td>
  	</tr>
  	<tr>
  		<td>item</td>
  		<td>item</td>
  		<td>item</td>
  		<td>item</td>
  		<td>item</td>
  	</tr>
  </table>
  <hr>
  <table class="type2">
  	<tr>
  		<td>item</td>
  		<td>item</td>
  		<td>item</td>
  		<td>item</td>
  		<td>item</td>
  	</tr>
  	<tr>
  		<td>item</td>
  		<td>item</td>
  		<td>item</td>
  		<td>item</td>
  		<td>item</td>
  	</tr>
  	<tr>
  		<td>item</td>
  		<td>item</td>
  		<td>item</td>
  		<td>item</td>
  		<td>item</td>
  	</tr>
  	<tr>
  		<td>item</td>
  		<td>item</td>
  		<td>item</td>
  		<td>item</td>
  		<td>item</td>
  	</tr>
  	<tr>
  		<td>item</td>
  		<td>item</td>
  		<td>item</td>
  		<td>item</td>
  		<td>item</td>
  	</tr>
  </table>
  <hr>
  <div class="sjx">
  	<div class="innersjx"></div>
  </div>
 <!--  <div class="makser-wp">
 	  <div class="makser"></div>
 	  <div class="dialog">
 	  	<label>姓名<input type="text" name=""></label>
 	  	<label>性别<input type="radio" name="gender">男<input type="radio" name="gender">女</label>
 	  	<label><textarea onresize=""></textarea></label>
 	  </div>	
 </div> -->
 <div id="outer">
 	
 	<div id="inner">
 		<label>爱好：<input type="text" name=""></label>
 		<button id="btn">增加</button>
 	</div>
 </div>
 <script type="text/javascript">
    var outer=document.getElementById('outer');
    var inner=document.getElementById('inner');
    var btn=document.getElementById('btn');
    btn.onclick=function(){
    	var getP=getElementP();
    	inner.appendChild(getP);
    }

   function getElementP(){
   	var p=document.createElement('p');
   	var input=document.createElement('input');
   	var button=document.createElement('button');
   	var text=document.createTextNode('删除');
   	input.type='text';
    button.appendChild(text);
    p.appendChild(button);
   	p.appendChild(input);
   return p;
   }


 	for(var i=0; i<5;i++){
  setTimeout(function(){
  console.log(i);
  },i*1000);
 }
var obj={
	name:"abc",
	age:20,
	gender:"女"
}
 for (var o in obj){
 	console.log(obj[o]);
 }
 var a="abcd-efgh-igk-lmn-opq"
 console.log(a.split());
 console.log(Math.floor(Math.random()*5+5));




 </script>
 
</body>
</html>